<template>
  <div>
    <a-card hoverable class="recommond" title="推荐阅读" :head-style="headStyle" :body-style="bodyStyle">
      <router-link v-for="item in blogs" :key="item.blogId" :to="'/info/'+item.blogId" class="recommond-container">
        <div class="recommond-title">
          {{ item.blogTitle }}
        </div>
        <div class="recommond-type">
          <div class="read-type">
            <div class="read-type-left">
              分类: <a-tag class="read-type-left-tag" color="green">{{ item.typeName }}</a-tag>
            </div>
            <div v-if="item.tagNameList.length>0" class="read-type-right">
              标签: <a-tag v-for="(n,index) in item.tagNameList" :key="index" class="read-type-right-tag" :color="n.tagColor">{{ n.tagName }}</a-tag>
            </div>
          </div>
        </div>
        <div class="recommond-bottom">
          <div class="recommond-time">
            {{ item.createdTime }}
          </div>
          <div class="recommond-like">
            <a-icon type="eye" /> {{ item.blogRead }}
            <a-icon type="heart" /> {{ item.blogCollection }}
            <a-icon type="like" /> {{ item.blogGoods }}
            <a-icon type="message" /> {{ item.blogComment }}
          </div>
        </div>
      </router-link>
    </a-card>
  </div>
</template>

<script>
import blogApi from '@/api/blog'
export default {
  name: 'Recommond',
  data() {
    return {
      headStyle: {
        borderLeft: '5px solid #5396E4',
        fontSize: '18px',
        fontWeight: 'bold',
        lineHeight: '15px'
      },
      blogs: [],
      bodyStyle: {
        padding: '10px 24px',
        zoom: 1
      }
    }
  },
  created() {
    this.getRecomRead()
  },
  methods: {
    getRecomRead() {
      blogApi.recomRead().then(res => {
        if (res.code === 200) {
          this.blogs = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-card-bordered{
    border-bottom: none !important;
  }
  .recommond{
    height: auto;
    overflow: hidden;
  }
.recommond-container{
  display: flex;
  flex-flow:column nowrap;
  /*标题*/
  .recommond-title{
    font-size: 16px;
    color: #717682;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 43px !important;
  }
  .recommond-type{
    color: #a2a2a2;
    margin-top: 12px;
    margin-bottom: 13px;
    .read-type{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      .read-type-left{
        width: auto;
        display: flex;
        align-items: center;
        .read-type-left-tag{
          margin-left: 5px;
        }
      }
      .read-type-right{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-start;
        .read-type-right-tag{
          &:first-child{
            margin-left: 5px;
          }
        }
      }
    }
  }
  .recommond-bottom{
    display: flex;
    justify-content: space-between;
    color: #c8c8c8;
    line-height: 20px;
    .recommond-time{

    }
    .recommond-like{
      width: 100px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
